<template>
  <!-- 时光机 -->
  <div id="sgjDiv">
    <Timeline style="padding: 20px">
      <TimelineItem :color="item.type" v-for="item in renewData" :key="item.id">
        <p class="time">{{ item.turnoverTime }}</p>
        <MdPreview editorId="renew_editorId" :modelValue="item.content" />
      </TimelineItem>
    </Timeline>
  </div>
</template>
<script setup>
  const axios = inject('axios');
  import { MdPreview } from 'md-editor-v3';

  const renewData = ref();
  onMounted(() => {
    (async () => {
      try {
        const response = await axios.post('renew/getRenew', { pageSize: 100 });
        let res = response.data;
        if (res.msg == '成功') {
          renewData.value = res.data.records;
        }
      } catch (error) {
        // 请求失败，捕获并处理错误
        console.error('Error:', error);
      }
    })();
  });
</script>
<style scoped>
  .time {
    font-size: 12px;
  }
  .title {
    font-weight: bold;
  }

  #sgjDiv {
    height: 75vh;
    overflow: auto;
  }

  /* 定义滚动条的基本样式，但初始时不显示 */
  #sgjDiv::-webkit-scrollbar {
    width: 0.3rem;
    opacity: 0;
  }

  /* 当鼠标悬停在元素上时，滚动条出现 */
  #sgjDiv:hover::-webkit-scrollbar {
    opacity: 1;
  }

  #sgjDiv:hover::-webkit-scrollbar-track {
    border-radius: 10px;
  }
  #sgjDiv:hover::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px #bbbbbb;
    background-color: blue;
  }
</style>
